@charset "utf-8";



/* -------------------- 布局 ------------------------- // */
.d-flex {
  display: flex ;
}

.d-inline-flex {
  display: inline-flex ;
}

.d-none {
  display: none ;
}

.d-block {
	display: block ;
}
.d-inline {
	display: inline-block ;
}

/* flex-direction属性决定主轴的方向（即项目的排列方向） */
.flex-row {
  flex-direction: row ;
}

.flex-column {
  flex-direction: column ;
}

.flex-row-reverse {
  flex-direction: row-reverse ;
}

.flex-column-reverse {
  flex-direction: column-reverse ;
}

/* flex-wrap属性定义，如果一条轴线排不下，如何换行 */
.flex-wrap {
  flex-wrap: wrap ;
}

.flex-nowrap {
  flex-wrap: nowrap ;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse ;
}

/* justify-content属性定义了项目在主轴上的对齐方式 */
.justify-content-start {
  justify-content: flex-start ;
}

.justify-content-end {
  justify-content: flex-end ;
}

.justify-content-center {
  justify-content: center ;
}

.justify-content-between {
  justify-content: space-between ;
}

.justify-content-around {
  justify-content: space-around ;
}

  /* 均匀排列每个元素,每个元素之间的间隔相等 */
.justify-content-evenly {
  justify-content: space-evenly ;
}

/* align-items属性定义项目在交叉轴上如何对齐 */
.align-items-start {
  align-items: flex-start ;
}

.align-items-end {
  align-items: flex-end ;
}

.align-items-center {
  align-items: center ;
}

.align-items-baseline {
  align-items: baseline ;
}

.align-items-stretch {
  align-items: stretch ;	
}

/* align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用 */
.align-content-start {
  align-content: flex-start ;
}

.align-content-end {
  align-content: flex-end ;
}

.align-content-center {
  align-content: center ;
}

.align-content-between {
  align-content: space-between ;
}

.align-content-around {
  align-content: space-around ;
}

.align-content-stretch {
  align-content: stretch ;
}

/* order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0 */
.order-first {
  order: -1 ;
}

.order-0 {
  order: 0 ;
}

@for $i from 1 to 11 {
	.order-#{$i} { order: $i ;}
}

/* flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大 */
.flex-grow-0 {
  flex-grow: 0 ;
}

.flex-grow-1 {
  flex-grow: 1 ;
}

/* flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 */
.flex-shrink-0 {
  flex-shrink: 0 ;
}

.flex-shrink-1 {
  flex-shrink: 1 ;
}


/* align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch */
.align-self-auto {
  align-self: auto ;
}

.align-self-start {
  align-self: flex-start ;
}

.align-self-end {
  align-self: flex-end ;
}

.align-self-center {
  align-self: center ;
}

.align-self-baseline {
  align-self: baseline ;
}

.align-self-stretch {
  align-self: stretch ;
}


/* -------------------- 内边距   ------------------------- */
.p-0 {
  padding: 0 ;
}
.m-0 {
  margin: 0 ;
}
.b-0 {
  border: 0 ;
}

@for $i from 1 to 100 {
	// 内边距 padding
  .p-#{$i * 1} { padding: 1rpx * $i;}
  .p-l-#{$i * 1} { padding-left: 1rpx * $i;}
  .p-r-#{$i * 1} { padding-right: 1rpx * $i;}
  .p-t-#{$i * 1} { padding-top: 1rpx * $i;}
  .p-b-#{$i * 1} { padding-bottom: 1rpx * $i;}
	
	// 外边距 margin
  .m-#{$i * 1} { margin: 1rpx * $i;}
  .m-l-#{$i * 1} { margin-left: 1rpx * $i;}
  .m-r-#{$i * 1} { margin-right: 1rpx * $i;}
  .m-t-#{$i * 1} { margin-top: 1rpx * $i;}
  .m-b-#{$i * 1} { margin-bottom: 1rpx * $i;}
	
	// 边框 border
  .b-#{$i} { border: 1rpx * $i solid #eee;}
  .b-l-#{$i} { border-left: 1rpx * $i solid #eee;}
  .b-r-#{$i} { border-right: 1rpx * $i solid #eee;}
  .b-t-#{$i} { border-top: 1rpx * $i solid #eee;}
  .b-b-#{$i} { border-bottom: 1rpx * $i solid #eee;}
}

  
/* -------------------- 宽度、高度 -------------------------*/
@for $i from 1 to 11 {
	.w-#{$i * 10} {width: $i * 10% ;}
	.vw-#{$i * 10} {width: $i * 10vw ;}
	.vh-#{$i * 10} {height: $i * 10vh ;}
}
@for $i from 1 to 81 {
	.max-w-#{$i * 2} {max-width: $i * 2rpx ;}
	.min-w-#{$i * 2} {min-width: $i * 2rpx ;}
	
	.h-#{$i * 2} {height: $i * 2rpx ;}
	.max-h-#{$i * 2} {max-height: $i * 2rpx ;}
	.min-h-#{$i * 2} {min-height: $i * 2rpx ;}
	
	//圆角边框
	.r-#{$i} { border-radius: 1rpx * $i;}
	.r-t-l-#{$i} { border-top-left-radius: 1rpx * $i;}
	.r-t-r-#{$i} { border-top-right-radius: 1rpx * $i;}
	.r-b-t-#{$i} { border-bottom-right-radius: 1rpx * $i;}
	.r-b-b-#{$i } { border-bottom-left-radius: 1rpx * $i;}
}

.circle {
	border-radius: 50%;
}

/*-------------------- 文本 -------------------------*/
/* 文本超出 n 行后省略 */
@for $i from 1 to 6 {
	.text-line-#{$i} {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: $i;
		overflow: hidden;
	}
}

.text-center {
	text-align: center ;
}

.text-left {
	text-align: left ;
}

.text-right {
	text-align: right ;
}


/* -------------------- 字体 -------------------------*/
.font-weight-bold {
	font-weight: bold ;
}

@for $i from 0 to 31 {
	.font-size-#{$i*2 + 12} { font-size: ($i * 2 + 12) * 1rpx ;}
}

@for $i from 1 to 11 {
	.font-weight-#{$i * 100} { font-weight: $i * 100 ;}
}


// 颜色
.bg-theme {
	background-color: $theme-color ;
}
.bg-white {
	background-color: #fff ;
}
.font-color-white {
	color: white ;
}
.font-color-red {
	color: red ;
}
.font-color-theme {
	color: $theme-color ;
}
.font-color-999 {
	color: #999;
}
.font-color-gray {
	color: #999;
}
.font-color-333 {
	color: #333;
}
.font-color-A3 {
	color: #A3A3A3;
}
//文本
.item-flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

//图片
@for $i from 20 to 200 {
	.img-#{$i} {width: $i * 1rpx;height: $i * 1rpx;}
	.img-w-#{$i} {width: $i * 1rpx;}
	.img-h-#{$i} {height: $i * 1rpx;}
}
